<template>
  <div class="require-online">
    <div class="drawer-wrap" :class="{ disabled: !editable }">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" ref="editForm" :rules="editFormRules" label-width="0">
          <el-row :gutter="20">
            <el-col :span="12" :offset="6">
              <div class="tag-name">
                <span v-if="!editable || isChange">{{ editForm.tagNm }}</span>
                <template v-else>
                  <div class="star"></div>
                  <el-form-item prop="tagNm">
                    <el-input placeholder="请输入标签名称" v-model="editForm.tagNm"></el-input>
                  </el-form-item>
                </template>
              </div>
            </el-col>
          </el-row>
          <div class="content-divider first">
            <div class="clearfix">
              <div class="number">01</div>
              <div class="divider-title">标签分类和标签包信息<br />Tag Classification And Tag Packet information</div>
              <div class="bg"></div>
            </div>
          </div>
          <div class="catalog">
            <template v-if="!editable || isChange">
              <p v-if="!tagInfo.belongCatalogList.length">暂无分类</p>
              <ul v-else class="catalogList">
                <li v-for="(item, index) in tagInfo.belongCatalogList" :key="index">{{ item }}</li>
              </ul>
            </template>
            <template v-else>
              <el-button type="primary" @click="addRule" v-if="!editForm.catalogs.length">添加分类</el-button>
              <template v-if="editForm.catalogs.length">
                <el-row class="title">
                  <el-col :span="8" :offset="2">标签体系</el-col>
                  <el-col :span="8" :offset="2">分类</el-col>
                </el-row>
                <el-row :gutter="20" v-for="(item, index) in editForm.catalogs" :key="index">
                  <el-col :span="8" :offset="2">
                    <el-form-item
                      :prop="'catalogs.' + index + '.catalogClassId'"
                      :rules="[
                        {
                          required: true,
                          message: '标签体系不能为空',
                          trigger: ['blur', 'change']
                        }
                      ]"
                    >
                      <el-select
                        v-model="item.catalogClassId"
                        :disabled="!editable"
                        @change="changeClass($event, index)"
                      >
                        <el-option
                          v-for="catalogClass in catalogClassList"
                          :key="catalogClass.catalogClassId"
                          :label="catalogClass.catalogClassNm"
                          :value="catalogClass.catalogClassId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8" :offset="2">
                    <el-form-item
                      :prop="'catalogs.' + index + '.catalogId'"
                      :rules="[
                        {
                          required: true,
                          message: '分类不能为空',
                          trigger: ['blur', 'change']
                        }
                      ]"
                    >
                      <el-cascader
                        v-model="item.catalogId"
                        :options="item.catalogList"
                        :props="props"
                        :key="item.tag"
                        clearable
                        filterable
                        :disabled="!editable"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" v-if="editable">
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      size="mini"
                      plain
                      circle
                      @click="addRule(index)"
                    ></el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-minus"
                      size="mini"
                      plain
                      circle
                      @click="deleteRule(index)"
                    ></el-button>
                  </el-col>
                </el-row>
              </template>
            </template>
          </div>
          <el-row class="packet">
            <el-col :span="24">
              <p v-if="(!editable || isChange) && !editForm.packets.length">暂无标签包</p>
              <el-form-item
                prop="packets"
                label="标签包"
                label-width="90px"
                :rules="
                  isChange
                    ? []
                    : [
                        {
                          required: true,
                          message: '标签包不能为空',
                          trigger: 'change'
                        }
                      ]
                "
                v-else
              >
                <el-select
                  v-model="editForm.packets"
                  multiple
                  filterable
                  placeholder="选择标签包"
                  :disabled="!editable || isChange"
                >
                  <el-option
                    v-for="item in packetList"
                    :key="item.packetId"
                    :label="item.packetNm"
                    :value="item.packetId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="content-divider second">
            <div class="clearfix">
              <div class="number">02</div>
              <div class="divider-title">标签应用渠道<br />Tag Application Channel</div>
              <div class="bg"></div>
            </div>
          </div>
          <div class="packet">
            <p v-if="(!editable || isChange) && !editForm.applicationChannel.length">暂无应用渠道</p>
            <el-form-item prop="applicationChannel" label="应用渠道" label-width="100px" v-else>
              <el-select
                v-model="editForm.applicationChannel"
                multiple
                filterable
                placeholder="选择应用渠道"
                :disabled="!editable || isChange"
              >
                <el-option
                  v-for="dict in $dictList('application_channel')"
                  :key="dict.key"
                  :label="dict.value"
                  :value="dict.key.toString()"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-row :gutter="20"> </el-row>
          <div class="content-divider first">
            <div class="clearfix">
              <div class="number">03</div>
              <div class="divider-title">标签信息<br />Tag information</div>
              <div class="bg"></div>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="ol-item">
                <span>标签类别：</span>
                {{ tagInfo.tagKind }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="ol-item">
                <span>统计粒度：</span>
                {{ tagInfo.hqTag }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="ol-item">
                <span>客户统计范围：</span>
                {{ tagInfo.clientStatRange }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="ol-item">
                <span>唯一标识：</span>
                {{ tagInfo.identifierFlag ? '是' : '否' }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="ol-item">
                <span>开发排版：</span>
                {{ tagInfo.planScheduleDt }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="ol-item">
                <span>计划排版：</span>
                {{ tagInfo.requireScheduleDt }}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="ol-item">
                <span>上线平台：</span>
                <span v-for="(item, index) in tagInfo.appPlfms" :key="index" class="card-item">
                  <icon-svg name="iconScene"></icon-svg>{{ item }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="card ol-card">
                <div class="card-title">
                  <icon-svg name="iconStory"></icon-svg><br />
                  标签故事
                </div>
                <div class="card-content blue">
                  <el-input
                    placeholder="请输入标签故事"
                    v-model="tagInfo.tagStory"
                    type="textarea"
                    :rows="5"
                    disabled
                  ></el-input>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="card ol-card">
                <div class="card-title">
                  <icon-svg name="iconBizstmt"></icon-svg><br />
                  业务口径
                </div>
                <div class="card-content blue">
                  <el-form-item prop="bizStmt">
                    <el-input
                      placeholder="请输入业务口径"
                      v-model="editForm.bizStmt"
                      type="textarea"
                      :maxlength="1000"
                      :rows="5"
                      :show-word-limit="true"
                      :disabled="!editable || isChange"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="card ol-card">
                <div class="card-title">
                  <icon-svg name="iconItstmt"></icon-svg><br />
                  技术口径
                </div>
                <div class="card-content blue">
                  <el-input
                    placeholder="暂无内容"
                    v-model="tagInfo.itStmt"
                    type="textarea"
                    :rows="5"
                    disabled
                  ></el-input>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="content-divider second">
            <div class="clearfix">
              <div class="number">04</div>
              <div class="divider-title">来源表信息<br />Source table information</div>
              <div class="bg"></div>
            </div>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="ol-item"><span>数据源：</span>{{ tagInfo.plfm }}</div>
            </el-col>
            <el-col :span="8">
              <div class="ol-item"><span>数据库：</span>{{ tagInfo.db }}</div>
            </el-col>
            <el-col :span="8">
              <div class="ol-item"><span>数据表：</span>{{ tagInfo.table }}</div>
            </el-col>
            <el-col :span="8" v-if="tagInfo.tagKindId !== 5">
              <div class="ol-item">
                <span>{{ tagInfo.tagKindId === 4 ? '事件ID' : '字段' }}：</span>{{ tagInfo.field }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="ol-item">
                <span>关联字段：</span>
                {{ tagInfo.relaFields.join(',') }}
              </div>
            </el-col>
            <el-col :span="8" v-if="tagInfo.tagKindId !== 4 && tagInfo.tagKindId !== 5">
              <div class="ol-item"><span>取值类型： </span>{{ tagInfo.valueType }}</div>
            </el-col>
            <el-col :span="8">
              <div class="ol-item">
                <span>更新频率：</span>
                {{ tagInfo.updateFreq }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="ol-item">
                <span>更新规则：</span>
                {{ tagInfo.updateFreqId === 3 && tagInfo.updateFreqValue == '0' ? '月末' : tagInfo.updateFreqValue }}
                <freq-tips></freq-tips>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="ol-item">
                <span>标签编码：</span>
                {{ tagInfo.tagCode }}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="source-params sync">
                <div class="params-title">
                  <icon-svg name="iconShareSQL"></icon-svg><br />
                  数据同步
                </div>
                <div class="params-content">
                  <div class="content-top clearfix">
                    <el-col :span="6" align="center"><span>同步平台</span></el-col>
                    <el-col :span="6" align="center"><span>同步数据库</span></el-col>
                    <el-col :span="6" align="center"><span>同步数据表</span></el-col>
                    <el-col :span="6" align="center"><span>同步字段</span></el-col>
                  </div>
                  <ul class="tag-scrollbar">
                    <li v-for="item in tagInfo.syncRecords" :key="item.syncPlfmId" class="clearfix">
                      <el-row>
                        <el-col :span="6" align="center">{{ item.syncPlfmNm }}</el-col>
                        <el-col :span="6" align="center">{{ item.syncDbNm }}</el-col>
                        <el-col :span="6" align="center">{{ item.syncTableNm }}</el-col>
                        <el-col :span="6" align="center">{{ item.syncFieldNm }}</el-col>
                      </el-row>
                    </li>
                  </ul>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="source-params left">
                <div class="params-title">
                  <icon-svg name="iconTech"></icon-svg><br />
                  是否枚举值<br />({{ tagInfo.enumTag ? '是' : '否' }})
                </div>
                <div class="params-content">
                  <div class="content-top clearfix">
                    <el-row :gutter="5">
                      <el-col :span="10" align="center"><span>枚举值</span></el-col>
                      <el-col :span="14" align="center"><span>描述</span></el-col>
                    </el-row>
                  </div>
                  <tag-enums :tagId="tagInfo.tagId" :onLineFlag="0" :isChange="isChange"></tag-enums>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="source-params right">
                <div class="params-title">
                  <icon-svg name="iconBase"></icon-svg><br />
                  是否带参数<br />({{ tagInfo.haveParam ? '是' : '否' }})
                </div>
                <div class="params-content">
                  <div class="content-top clearfix">
                    <el-row :gutter="5">
                      <el-col :span="6" align="center"><span>名称</span></el-col>
                      <el-col :span="5" align="center"><span>类型</span></el-col>
                      <el-col :span="6" align="center"><span>字段</span></el-col>
                      <el-col :span="7" align="center"><span>参数值</span></el-col>
                    </el-row>
                  </div>
                  <ul class="tag-scrollbar">
                    <li v-for="(item, index2) in tagInfo.params" :key="index2" class="clearfix">
                      <el-row :gutter="5">
                        <el-col :span="6" align="center">{{ item.paramNm }}</el-col>
                        <el-col :span="5" align="center">{{ $dict('value_type')[item.paramType] }}</el-col>
                        <el-col :span="6" align="center">{{ item.fieldNm }}</el-col>
                        <el-col :span="7" align="center">{{ item.optParamVal }}</el-col>
                      </el-row>
                    </li>
                  </ul>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="content-divider third">
            <div class="clearfix">
              <div class="number">05</div>
              <div class="divider-title">责任人信息<br />Responsible person information</div>
              <div class="bg"></div>
            </div>
          </div>
          <el-row :gutter="20" class="response">
            <el-col :span="6">
              <div class="card row2">
                <div>
                  <span class="icon linear-purpose">
                    <icon-svg name="iconResTeam"></icon-svg>
                  </span>
                </div>
                <div class="title">责任团队</div>
                <div class="content">
                  {{ tagInfo.respTeamNm }}
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card row2">
                <div>
                  <span class="icon linear-blue">
                    <icon-svg name="iconResponse"></icon-svg>
                  </span>
                </div>
                <div class="title">责任人</div>
                <div class="content">
                  {{ tagInfo.responserNm ? $name(tagInfo, 'responserNnm', 'responserNm') : '暂无' }}
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card row2">
                <div>
                  <span class="icon linear-purpose">
                    <icon-svg name="iconResTeam"></icon-svg>
                  </span>
                </div>
                <div class="title">开发团队</div>
                <div class="content">
                  {{ tagInfo.amartDevTeamNm }}
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card row2">
                <div>
                  <span class="icon linear-blue">
                    <icon-svg name="iconResponse"></icon-svg>
                  </span>
                </div>
                <div class="title">开发负责人</div>
                <div class="content">
                  {{ $name(tagInfo, 'amartDeveloperNnm', 'amartDeveloper') }}
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card row2">
                <div>
                  <span class="icon linear-blue">
                    <icon-svg name="iconResponse"></icon-svg>
                  </span>
                </div>
                <div class="title">提出人</div>
                <div class="content">
                  {{ $name(tagInfo, 'requirerNnm', 'requirerNm') }}
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="content-divider first">
            <div class="clearfix">
              <div class="number">06</div>
              <div class="divider-title">需求状态<br />Tag status</div>
              <div class="bg"></div>
            </div>
          </div>
          <ul class="tag-status-list" v-if="tagInfo.requireStatusList.length">
            <li v-for="(item, index) in tagInfo.requireStatusList" :key="index">
              <el-row :gutter="20">
                <el-col :span="5">{{ $name(item, 'handlerNnm', 'handlerNm') }}</el-col>
                <el-col :span="5">{{ item.nodeNm }}</el-col>
                <el-col :span="7">{{ item.procTm }}</el-col>
                <el-col :span="7">{{ item.handlerCmnt }}</el-col>
              </el-row>
            </li>
          </ul>
          <div class="catalog" v-else>
            <p>暂无内容</p>
          </div>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns" v-if="editable">
      <el-button type="warning" size="medium" @click="handleReject">驳回</el-button>
      <el-button type="primary" size="medium" @click="assignHandler">更换审批人</el-button>
      <el-button type="primary" size="medium" @click="submit">确认上线</el-button>
    </div>
    <tag-reject ref="tagReject" @callback="confirm"></tag-reject>
    <user-selection ref="userSelection" :nodeId="60" @callback="confirmUser"></user-selection>
    <tag-text-dialog ref="tagTextDialog"></tag-text-dialog>
  </div>
</template>

<script>
import tagReject from '../../../../components/tag-reject-selection'
import userSelection from '../../../../components/tag-user-selection'
import freqTips from '@/components/tag-freq-tips'
export default {
  components: {
    tagReject,
    userSelection,
    freqTips
  },
  data() {
    return {
      editable: true,
      isChange: false,
      editForm: {
        tagNm: '',
        bizStmt: '',
        catalogs: [],
        applicationChannel: [],
        packets: []
      },
      editFormRules: {
        tagNm: [
          { required: true, message: '标签名称不能为空', trigger: 'blur' },
          { max: 100, message: '标签名称不能超过100个字符', trigger: 'blur' }
        ],
        bizStmt: [
          { required: true, message: '业务口径不能为空', trigger: 'blur' },
          { max: 1000, message: '业务口径不能超过1000个字符', trigger: 'blur' }
        ]
      },
      catalogClassList: [],
      packetList: [],
      depts: [],
      responsers: [],
      props: {
        expandTrigger: 'hover',
        emitPath: false,
        value: 'catalogId',
        label: 'catalogNm',
        children: '_children'
      },
      tagInfo: {
        tagId: '',
        requirerNm: '',
        requirerNnm: '',
        respTeamNm: '',
        responserNm: '',
        responserNnm: '',
        bmartDevTeamNm: '',
        bmartDeveloper: '',
        bmartDeveloperNnm: '',
        appPlfms: [],
        tagStory: '',
        itStmt: '',
        plfm: '',
        db: '',
        table: '',
        field: '',
        relaFields: [],
        valueType: '',
        tagKind: '',
        tagKindId: '',
        hqTag: '',
        clientStatRange: '',
        updateFreq: '',
        updateFreqId: '',
        updateFreqValue: '',
        planScheduleDt: '',
        syncRecords: [],
        enumTag: '',
        enumVals: [],
        haveParam: '',
        params: [],
        identifierFlag: '',
        requireStatusList: [],
        amartDevTeamNm: '',
        amartDeveloper: '',
        amartDeveloperNnm: '',
        belongCatalogList: [],
        requireScheduleDt: '',
        tagCode: ''
      }
    }
  },
  methods: {
    init(tag) {
      this.initTag(tag)
      this.getCatalogs()
      this.getPackets()
    },
    initTag(tag) {
      this.isChange = tag.isChange
      this.editable = tag.isModify
      this.editForm.tagNm = tag.tagNm
      this.editForm.bizStmt = tag.bizStmt
      this.tagInfo = {
        tagId: tag.tagId,
        requirerNm: tag.requirerNm,
        requirerNnm: tag.requirerNnm,
        respTeamNm: tag.respTeamNm,
        responserNm: tag.responserNm,
        responserNnm: tag.responserNnm,
        bmartDevTeamNm: tag.bmartDevTeamNm,
        bmartDeveloper: tag.bmartDeveloper,
        bmartDeveloperNnm: tag.bmartDeveloperNnm,
        appPlfms: [],
        tagStory: tag.tagStory,
        itStmt: tag.itStmt,
        plfm: tag.plfm,
        db: tag.db,
        table: tag.table,
        field: tag.field,
        relaFields: tag.relaFields,
        valueType: tag.valueType,
        tagKind: tag.tagKind,
        tagKindId: tag.tagKindId,
        hqTag: tag.hqTag,
        clientStatRange: tag.clientStatRange,
        updateFreq: tag.updateFreq,
        updateFreqId: tag.updateFreqId,
        updateFreqValue: tag.updateFreqValue,
        planScheduleDt: tag.planScheduleDt ? tag.planScheduleDt.substring(0, 7) : tag.planScheduleDt,
        syncRecords: tag.syncRecords,
        enumTag: tag.enumTag,
        enumVals: tag.enumVals,
        haveParam: tag.haveParam,
        params: tag.params,
        identifierFlag: tag.identifierFlag,
        requireStatusList: tag.requireStatusList,
        amartDevTeamNm: tag.amartDevTeamNm,
        amartDeveloper: tag.amartDeveloper,
        amartDeveloperNnm: tag.amartDeveloperNnm,
        belongCatalogList: tag.belongCatalogList,
        requireScheduleDt: tag.requireScheduleDt ? tag.requireScheduleDt.substring(0, 7) : '',
        tagCode: tag.tagCode
      }
      tag.appPlfms.forEach(v => this.tagInfo.appPlfms.push(v.appPlfmNm))
      if (tag.belongPacketList) tag.belongPacketList.forEach(item => this.editForm.packets.push(item.packetId))
      this.editForm.applicationChannel = tag.applicationChannel ? tag.applicationChannel.split(',') : []
    },
    getCatalogs() {
      this.$ajax({
        url: this.$ajax.setUrl('dcl/dclAssetCatalogClass/list'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.catalogClassList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getPackets() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagPacket/list'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.packetList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    addRule(index = 0) {
      let item = {
        catalogClassId: '',
        catalogList: [],
        catalogId: '',
        tag: 0
      }
      this.editForm.catalogs.splice(index + 1, 0, item)
    },
    deleteRule(index) {
      this.editForm.catalogs.splice(index, 1)
    },
    changeClass(classId, index) {
      this.editForm.catalogs[index].catalogList = []
      this.editForm.catalogs[index].tag++
      if (classId) {
        this.$ajax({
          url: this.$ajax.setUrl(`dcl/dclAssetCatalog/catalogClassId/${classId}`),
          method: 'get',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            var list = this.$utils.arrayToTree(data.data.length ? data.data.slice(1) : data.data, {
              id: 'catalogId',
              pid: 'parentCatalogId',
              mainSort: 'catalogLevel'
            })
            this.editForm.catalogs[index].catalogList = list
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      }
    },
    clearForm() {
      this.editable = true
      this.isChange = false
      this.editForm.tagNm = ''
      this.editForm.bizStmt = ''
      this.editForm.catalogs = []
      this.editForm.packets = []
      this.editForm.applicationChannel = ''
      this.tagInfo = {
        tagId: '',
        requirerNm: '',
        respTeamNm: '',
        responserNm: '',
        bmartDevTeamNm: '',
        bmartDeveloperNnm: '',
        bmartDeveloper: '',
        appPlfms: [],
        tagStory: '',
        plfm: '',
        db: '',
        table: '',
        field: '',
        relaFields: [],
        valueType: '',
        tagKind: '',
        tagKindId: '',
        hqTag: '',
        clientStatRange: '',
        updateFreq: '',
        updateFreqId: '',
        updateFreqValue: '',
        planScheduleDt: '',
        syncRecords: [],
        enumTag: '',
        enumVals: [],
        haveParam: '',
        params: '',
        identifierFlag: '',
        requireStatusList: [],
        amartDevTeamNm: '',
        amartDeveloper: '',
        amartDeveloperNnm: '',
        belongCatalogList: [],
        requireScheduleDt: '',
        tagCode: ''
      }
    },
    submit() {
      if (!this.isChange && !this.editForm.catalogs.length) {
        this.$message.error('标签分类信息不能为空')
        return
      }
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.$confirm(`确认上线需求【${this.editForm.tagNm}】？`).then(() => {
            let messageBox = document.getElementsByClassName('el-message-box__wrapper')
            messageBox[0].focus() // 防止按空格键重复确定
            let catalogIds = []
            this.editForm.catalogs.forEach(item => catalogIds.push(item.catalogId))
            let url = this.isChange
              ? `ast/astTagRequireModify/onLineTag/${this.tagInfo.tagId}`
              : 'ast/astTagRequireManager/onLineTag'
            let setData = this.isChange
              ? this.$ajax.setData()
              : this.$ajax.setData({
                  catalogIds: catalogIds,
                  packetIds: this.editForm.packets,
                  applicationChannel: this.editForm.applicationChannel.join(','),
                  tagId: this.tagInfo.tagId,
                  tagNm: this.editForm.tagNm,
                  bizStmt: this.editForm.bizStmt
                })
            this.$ajax({
              url: this.$ajax.setUrl(url),
              method: 'post',
              data: setData
            }).then(({ data }) => {
              if (data && data.code === '0') {
                this.$message.success(data.msg)
                this.confirm()
              } else {
                this.$message.error(data.data || data.msg)
              }
            })
          })
        }
      })
    },
    handleReject() {
      this.$refs.tagReject.showDialog(this.tagInfo.tagId, this.isChange)
    },
    assignHandler() {
      this.$refs.userSelection.showDialog(true)
    },
    changeHandler(handlerId) {
      let url = this.isChange ? 'ast/astTagRequireModify/reAssignHandler' : 'ast/astTagRequire/reAssignHandler'
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'post',
        data: this.$ajax.setData({
          assetId: this.tagInfo.tagId,
          nowHandler: handlerId,
          procId: 1
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.data || data.msg)
          this.confirm()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    confirmUser(handlerId) {
      if (handlerId) {
        this.changeHandler(handlerId)
      }
    },
    confirm() {
      this.$emit('callback')
      this.clearForm()
    }
  }
}
</script>

<style lang="scss">
.require-online {
  .tag-name {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    .el-input__inner {
      background-color: #fbf5e5;
      border: 1px dashed #faeace;
    }
    span {
      display: inline-block;
      padding: 10px 100px;
      background-color: #fbf5e5;
      border: 1px dashed #faeace;
    }
  }
  .ol-item {
    padding-left: 45px;
    margin-bottom: 10px;
    line-height: 45px;
    background-color: #fff;
    box-shadow: #eee 0 0 10px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    span {
      font-weight: bold;
      color: $theme-color;
    }
    &:before {
      width: 15px;
      height: 15px;
      border: 4px solid #c9c1f4;
      content: '';
      background-color: #a796f4;
      position: absolute;
      left: 15px;
      top: 15px;
      border-radius: 50%;
    }
  }
  .ol-card {
    margin-bottom: 20px;
    padding: 0 0 0 200px;
    border-bottom: 0;
    position: relative;
    &:before {
      width: 3px;
      height: 50px;
    }
    &:after {
      width: 3px;
      height: 30px;
    }
    .card-title {
      width: 200px;
      color: $theme-color;
      margin: 2px 0 18px 0;
      text-align: center;
      position: absolute;
      left: 0;
      svg {
        width: 50px;
        height: 50px;
        margin: 20px 0 10px 0;
      }
    }
    .arts-title {
      margin-top: 30px;
    }
    .card-content {
      height: auto;
      min-height: 150px;
      padding: 20px 15px 0 15px;
      text-align: left;
      border-left: 3px solid $border-color;
      position: relative;
      .el-form-item,
      .el-form-item__content {
        height: 100%;
        line-height: 25px;
      }
      &:after {
        width: 3px;
        content: '';
        position: absolute;
        top: 10px;
        left: -3px;
        bottom: 10px;
      }
      &.blue:after {
        background-color: #23ace3;
      }
    }
  }
  .source-params {
    width: 100%;
    min-height: 40px;
    margin-bottom: 20px;
    box-shadow: #eee 0 0 10px;
    position: relative;
    .params-title {
      font-weight: bold;
      width: 150px;
      padding: 20px 0 30px 0;
      text-align: center;
      color: #fff;
      line-height: 40px;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      svg {
        width: 45px;
        height: 45px;
        opacity: 0.4;
      }
    }
    .params-content {
      font-size: 15px;
      padding-left: 150px;
      .content-top {
        padding: 5px 0;
        border-bottom: 1px solid $border-color;
        span {
          display: inline-block;
          width: 100%;
          padding: 5px 10px;
          background-color: #fcf5e5;
          border-radius: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .dot {
        display: inline-block;
        width: 5px;
        height: 5px;
      }
      ul {
        height: 200px;
        background-color: #fff;
        overflow-x: hidden;
        overflow-y: auto;
        li {
          line-height: 40px;
          .el-col {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .tag-enums {
        ul {
          height: auto;
        }
        & > ul {
          height: 168px;
        }
      }
    }
    &.sync {
      .params-title {
        background: #55b3ca url(~@/assets/img/params_bg.png) no-repeat;
        background-size: cover;
      }
      .dot {
        background-color: #c933bc;
      }
      .params-content ul {
        height: 150px;
      }
    }
    &.left {
      .params-title {
        background: #616bc4 url(~@/assets/img/params_bg.png) no-repeat;
        background-size: cover;
      }
      .dot {
        background-color: #ff9d2e;
      }
    }
    &.right {
      .params-title {
        background: #a58ff1 url(~@/assets/img/params_bg.png) no-repeat;
        background-size: cover;
      }
      .dot {
        background-color: #74c7bd;
      }
    }
  }
  .icon {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 20px 0;
    line-height: 70px;
    color: #fff;
    border-radius: 50%;
    svg {
      width: 40px;
      height: 40px;
      margin-top: 10px;
    }
  }
  .card {
    margin-bottom: 20px;
    text-align: center;
    .title {
      margin: 0 0 20px 0;
      color: $theme-color;
    }
    .content {
      height: 60px;
      color: $theme-color;
      position: relative;
      &:after {
        width: 100%;
        height: 3px;
        content: '';
        background-color: #666bc6;
        position: absolute;
        left: 0;
        bottom: -13px;
      }
    }
  }
  .row2 .content:not(.edit-content) {
    height: 30px;
  }
  .catalog {
    padding: 20px;
    border: 1px solid $border-color;
    text-align: center;
    p {
      margin-bottom: 10px;
    }
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
  .catalogList {
    li {
      padding: 10px 20px;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      &::before {
        content: '';
        width: 8px;
        height: 8px;
        background-color: #666bc6;
        border-radius: 50%;
        position: absolute;
        top: 15px;
        left: 0;
      }
    }
  }
  .packet {
    margin-top: 20px;
    .el-input.is-disabled .el-input__inner {
      background-color: #fff !important;
    }
    p {
      padding: 20px;
      border: 1px solid #e4e7ed;
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
</style>
